<template>
  <div class="vertical-scoll">
    <vertical-scroll :list="list">
      <template v-slot="{ data }">
        <span style="width: 100%; display: block; line-height: 30px">
          <div>{{ data.name }}</div>
        </span>
      </template>
    </vertical-scroll>
  </div>
  <div class="horizonta-scoll">
    <horizontal-scroll :list="list">
      <template v-slot="{ data }">
        <div class="vertical-text">
          {{ data.name }}
        </div>
      </template>
    </horizontal-scroll>
  </div>
  <div class="vertical-scoll">
    <vue3-seamless-scroll :list="list">
      <template v-slot="{ data }">
        <span style="width: 100%; display: block; line-height: 30px">
          <div>{{ data.name }}</div>
        </span>
      </template>
    </vue3-seamless-scroll>
  </div>
</template>
<script>
import { defineComponent, ref } from "vue";
import {
  Vue3SeamlessScroll,
  VerticalScroll,
  HorizontalScroll,
} from "vue3-seamless-scroll";

const listData = Array.from({ length: 10000 }, (_, i) => ({
  id: Date.now() + i + 1,
  name: `Vue3.0无缝滚动展示数据第${i + 1}条`,
}));

export default defineComponent({
  name: "App",
  components: {
    Vue3SeamlessScroll,
    VerticalScroll,
    HorizontalScroll,
  },
  setup() {
    const list = ref(listData);
    return {
      list,
    };
  },
});
</script>

<style>
.vertical-scoll {
  overflow: hidden;
  height: 300px;
}

.horizonta-scoll {
  overflow: hidden;
  height: 300px;
}

.vertical-text {
  height: 300px;
  writing-mode: vertical-lr;
  text-orientation: upright;
  line-height: 30px;
  display: inline-block;
}
</style>
